<div class="header" id="header">
    <div class="H-had">
        <div class="header-box">
            <div class="main">
                <div class="header">
                    <div class="logo"><a href="/"><img src="{$site_info.hlogo}"></a></div>
                    <div class="phone-icon">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="phone-nav">
                        <ul class="layui-nav" id="nav" lay-filter="demo">
                            {volist name="nav_tree" id="vo"}
                            <li class="layui-nav-item {if ($vo.url == $pathinfo)} layui-this {/if}" id="product">
                                <a href="{$vo.url}">{$vo.title}</a>
                                {if ($vo.child != '')}
                                <dl class="layui-nav-child ">

                                    {volist name="vo.child" id="vo2"}
                                    <dd class="{if ($vo2.url == $pathinfo)} layui-this {/if}"><a href="{$vo2.url}">{$vo2.title}</a></dd>
                                    {/volist}

                                </dl>
                                {/if}
                            </li>
                            {/volist}
                        </ul>
                        <div class="search">
                            <input type="text" name="" class="txt" placeholder="输入产品编号">
                            <div class="search-btn"><i class="evIcon s-b-icon"></i></div>
                        </div>
                    </div>
                    <div class="phone-back"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">

    layui.use(['element', 'layer'], function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        console.log(element)
        //监听导航点击
        element.on('nav(demo)', function (elem) {
            let attributes = elem.context.attributes;
            if (attributes != undefined) {
                let id = attributes[0].nodeValue;
            }
        });
        // var urlstr = location.href;
        // var urlstatus = false;
        // $("#nav a").each(function () {
        //     if ((urlstr + "/").indexOf($(this).attr("href")) > -1 && $(this).attr("href") != '') {
        //         $(this).parent().addClass("layui-this");
        //         urlstatus = true;
        //     } else {
        //         $(this).parent().removeClass("layui-this");
        //     }
        // });
        // if (!urlstatus) {
        //     $("#nav a").eq(0).parent().addClass("layui-this");
        // }
        $('.phone-icon').click(function () {
            $('.phone-nav').animate({'right': '0px'}, 300);
            $('.phone-back').animate({'left': '0px'}, 300);
        });


        $('.phone-back').click(function () {
            $('.phone-nav').animate({'right': '-60%'}, 300);
            $('.phone-back').animate({'left': '-40%'}, 300);
        });
    });

</script>

<!--backTop-->
<a class="backTop_Z" id="backTop" onclick="backTop();" href="javascript:void(0);"></a>
<script type="text/javascript">
    window.onscroll=function(){
        var winTop_1=document.documentElement.scrollTop;
        var winTop_2=document.body.scrollTop;
        var winTop;
        (winTop_1>winTop_2)?winTop=winTop_1:winTop=winTop_2;
        if(winTop>0){
            $("#backTop").css({'display':'block'});
        }
        if(winTop == 0){
            $("#backTop").css({'display':'none'});
        }
    };

    function backTop(){
        //document.documentElement.scrollTop=0;
        $("html,body").animate({scrollTop:0},1000); ;
    }
</script>